 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>欢迎光临 Music Store</title>
	<link type="text/css" rel="Stylesheet" href="style/front.css"/>
	<script src="jquery-3.1.1.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#main input").blur(function(){
				/*检查用户名输入*/
				if($(this).is(".username")){
					if(this.value==""){
						$(".username").next("label").addClass("error").html("请填写用户名");
					}else{
						$(".username").next("label").removeClass("error").html("");
					}
				}

				/*检查密码输入*/
				if($(this).is(".password")){
					if(this.value==""){
						$(".password").next("label").addClass("error").html("请填写密码");
					}else{
						$(".password").next("label").removeClass("error").html("");
					}
				}

				/*检查再次输入密码*/
				if($(this).is(".confirmPassword")){
					if(this.value==""){
						$(".confirmPassword").next("label").addClass("error").html("请填写确认密码");
					}else{
						$(".confirmPassword").next("label").removeClass("error").html("");
					}
					var password = $(".password").value;
					if(this.value != password){
						$(".confirmPassword").next("label").addClass("error").html("两次密码不一致");
					}else{
						$(".confirmPassword").next("label").removeClass("error").html("");
					}
				}

				/*验证邮箱*/
				if($(this).is(".email")){
					if(! /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(this.value)){
						$(".email").next("label").addClass("error").html("邮箱地址不正确");
					}else{
						$(".email").next("label").removeClass("error").html("");
					}
				}
			});

			/*提交*/
			$("#main input:submit").click(function(){
				var user = $(".username").val();
				var password = $(".password").val();
				var confirmPassword = $(".confirmPassword").val();
				var email = $(".email").val();
				if(user == "" && password =="" && confirmPassword == "" && email ==""){
					return false;
				}else{
					$(".form").submit();
				}
			});
		});
	</script>
  </head>
  
  <body>
    <div id="wrapper">
   	 	<div id="header">
	  		<div id="header-logo" >
	  			<a href="index.jsp"><img src="style/images/logo.png" alt=""></img></a>
	  		</div>
	  		<div id="header-login"><a href="#">登录</a> | <a href="#">注册</a></div>
	  		<div class="clearBoth"></div>
	  		<div id="header-search">
	  			<input id="keyword" type="text"  /><input id="btnSearch" type="button" value="搜索" />
	  		</div>
	  		<div id="header-nav">
	  			<ul>
	  				<li><a href="#">首页</a></li>
	  				<li><a href="#">商店</a></li>
	  				<li><a href="#">购物车</a></li>
	  				<li><a href="#">个人信息</a></li>
	  			</ul>
	  			<label id="welcome">您好，Sam。</label>
	  		</div>
	  	</div>
    	<div id="content">
    		<div id="sidebar">
	            唱片分类
	            <ul class="categories">
		            <li><a href="#">流行音乐</a></li>
		            <li><a class="even" href="#">摇滚音乐</a></li>
		            <li><a href="#">民谣</a></li>
		            <li><a class="even" href="#">爵士音乐</a></li>
            		<li><a href="#">校园歌曲</a></li>
            		<li><a class="even" href="#">民族音乐</a></li>
            		<li><a href="#">交响乐</a></li>
            		<li><a class="even" href="#">红色歌曲</a></li>
	            </ul>
            </div>
    		<div id="main">
    			<h3 id="main-title">用户注册</h3>
				<form action="RegisterServlet" method="post" class="form">
					<table>
						<tr>
							<td>用户名：</td>
							<td><input type="text" class="username" name="username" 
							value="<%=request.getParameter("username")==null?"":request.getParameter("username")%>"/><label></label> </td>
						</tr>
						<tr>
							<td>密码：</td>
							<td><input type="password" class="password" name="password" 
							value="<%=request.getParameter("password")==null?"":request.getParameter("password")%>"/><label></label> </td>
						</tr>
						<tr>
							<td>确认密码：</td>
							<td><input type="password" class="confirmPassword" name="confirmPassword"
							value="<%=request.getParameter("confirmPassword")==null?"":request.getParameter("confirmPassword")%>"/><label></label> </td>
						</tr>
						<tr>
							<td>姓名：</td>
							<td><input type="text" name="name"
							value="<%=request.getParameter("name")==null?"":request.getParameter("name")%>"/><label></label> </td>
						</tr>
						<tr>
							<td>地址：</td>
							<td><input type="text" name="address"
							value="<%=request.getParameter("address")==null?"":request.getParameter("address")%>"/><label></label> </td>
						</tr>
						<tr>
							<td>电话：</td>
							<td><input type="text" name="phone"
							value="<%=request.getParameter("phone")==null?"":request.getParameter("phone")%>"/><label></label> </td>
						</tr>
						<tr>
							<td>E-mail：</td>
							<td><input type="text" class="email" name="email"
							value="<%=request.getParameter("email")==null?"":request.getParameter("email")%>"/><label></label> </td>
						</tr>
						<tr>
							<td></td>
							<td colspan="2"><input type="submit" value="注册"/><label style="color:red"><%=request.getAttribute("error")==null?"":request.getAttribute("error")%></label> </td>
						</tr>

					</table>
				</form>
    		</div>
    		<div class="clearBoth"></div>
    	</div>
    	<div id="footer">
	  		<div id="footer-ad"> 
	  			<img src="style/images/footer.png" alt=""></img>
	  		</div>
	  		<div id="footer-contactUs">
	  			<p>Music Store</p>
	  			<p>Design by Sam Chen, July,2011.</p>
	  		</div>
	  	</div>
    </div>
  </body>
</html>
